<script lang="ts">
	import Logo from '$lib/images/logo.png';
	import { Icon } from '@smui/tab';
	import Button from '@smui/button';
	import IconButton from '@smui/icon-button';
	import { createEventDispatcher, getContext, onMount, tick } from 'svelte';
	import { useConfigstoreMounted, useUserstore } from '@/store';
	import MenuButton from '$components/business/menu-button';
	import type { I18nExport } from '@/i18n';
	import { goto } from '$utils/intercept';

	const { change, locale, t } = getContext<I18nExport>('lan');

	type MenuItem = {
		label: string;
		icon?: string;
		action?: () => void;
	};

	let menulist: MenuItem[] = [];
	const getMenulist: () => MenuItem[] = () => [
		{ label: $t('layout.self_order'), icon: 'grading', action: () => goto('/order/list') },
		{ label: $t('layout.profile'), icon: 'face_4', action: () => goto('/account') },
		{
			label: $t('layout.logout'),
			icon: 'logout',
			action: () => userStore.clearLoginState()
		}
	];

	type Tab = {
		label: string;
		icon?: string;
		href?: string;
		isMenu?: boolean;
		menulist?: MenuItem[];
		onClick?: () => void;
	};

	const dispatch = createEventDispatcher();
	const store = useConfigstoreMounted();
	const openHelpPage = () => dispatch('openHelpPage');
	const toLogin = () => dispatch('login');
	let lanOptions = { label: $locale, icon: 'translate', onClick: () => change(store.value.set) };
	const lanPreviewMap = { en: 'En', zh: '中文' };
	locale.subscribe((locale) => (lanOptions.label = lanPreviewMap[locale]));
	locale.subscribe(() => Promise.resolve().then(() => (menulist = getMenulist())));
	const tabs: Tab[] = [
		{ label: 'layout.china', icon: 'assistant_navigation', href: '' },
		{ label: 'layout.help', icon: 'help', onClick: openHelpPage },
		{ label: 'layout.account', icon: 'account_circle', onClick: toLogin }
	];

	let userStore: any;

	onMount(() => {
		userStore = useUserstore();
		userStore.token.subscribe((token: string) => {
			if (token) {
				tabs[2] = {
					label: 'layout.account',
					icon: 'account_circle',
					isMenu: true,
					onClick: () => {}
				};
			} else {
				tabs[2] = { label: 'layout.sign', icon: 'account_circle', onClick: toLogin };
			}
		});
	});
</script>

<header class="flex-cc w-full h-48px min-h-48px macnn-common__header sticky top-0 z-9999 bg-white">
	<div class="h-full w-1320px max-w-100% flex justify-between items-center px-10px">
		<a href="/">
			<img src={Logo} alt="MACNN INC" class="h-30px" />
		</a>

		<nav class="flex-cc flex-row h-full macnn-common__header-menu-list gap-12px">
			<Button on:click={lanOptions.onClick}>
				<Icon class="material-icons">{lanOptions.icon}</Icon>
				<span class="ml-1px">{lanOptions.label}</span>
			</Button>
			<!-- 迭代 tabs -->
			{#each tabs as tab}
				{#if tab.href}
					<a href="/{tab.href}" class="flex-cc h-full hover:no-underline">
						<Icon class="material-icons">{tab.icon}</Icon>
						<span class="ml-1px">{$t(tab.label)}</span>
					</a>
				{:else if tab.isMenu}
					<MenuButton
						color="var(--mdc-theme-primary)"
						text={$t(tab.label)}
						left_icon={tab.icon}
						list={menulist}
					></MenuButton>
				{:else}
					<Button on:click={tab.onClick}>
						<Icon class="material-icons">{tab.icon}</Icon>
						<span class="ml-1px">{$t(tab.label)}</span>
					</Button>
				{/if}
			{/each}
		</nav>
		<div class="macnn-common__header-menu-button h-full">
			<IconButton class="material-icons clear-button-radius">menu</IconButton>
		</div>
	</div>
</header>

<style lang="scss">
	.macnn-common__header {
		@media (max-width: 720px) {
			.macnn-common__header-menu-list {
				display: none;
			}
			.macnn-common__header-menu-button {
				display: block;
			}
			& > div {
				padding-right: 0;
			}
		}
		@media (min-width: 720px) {
			.macnn-common__header-menu-list {
				display: flex;
			}
			.macnn-common__header-menu-button {
				display: none;
			}
		}
	}
</style>
